<template>
  <div>
     <el-page-header  @back="$router.push('/vehiclelist')" content="车辆详情" class="huidan" style="margin-bottom:20px">
     </el-page-header>
     <el-card style="height:500px;">
      <el-tabs v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="基本信息" name="first" style="margin-right:200px;">
     <el-form ref="form"  label-width="80px">
 <el-row type="flex" justify="space-around">
   <el-form-item label="车辆编号" class="inputDeep">
    <el-input   style="width: 214px;" v-model="form.id" readonly disabled></el-input>
  </el-form-item>
   <el-form-item label="车牌号码">
    <el-input style="width: 214px;" readonly v-model="form.deviceGpsId"></el-input>
  </el-form-item>
   <el-form-item label="车型名称">
    <!-- <el-input  style="width: 214px;" v-model="form.truckTypeName"></el-input> -->
    <el-select v-model="list.name" placeholder="车型名称">
      <el-option v-for="item in list " readonly :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
 </el-row>
  <el-row type="flex" justify="space-around" >
   <el-form-item label="车辆体积" >

      <el-input  style="width: 214px;" v-model="form.allowableVolume" readonly disabled>
         <template slot="suffix" ><span class="ssss">m³</span>
    </template>
      </el-input>

  </el-form-item>
   <el-form-item label="车辆载重">
    <el-input  style="width: 214px;" v-model="form.allowableLoad" readonly>
       <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">吨</span>
    </template>
    </el-input>
  </el-form-item>
   <el-form-item label="GPSID">
    <el-input  style="width: 214px;" v-model="form.deviceGpsId" readonly></el-input>
  </el-form-item>
 </el-row>
 <el-row>
  <el-form-item label="图片信息">

  </el-form-item>
    <!-- <el-upload  ></el-upload> -->

 </el-row>
     </el-form>
    </el-tab-pane>
    <!-- right -->
    <el-tab-pane label="行驶证信息" name="second">
<el-form ref="form"  label-width="100px">
 <el-row type="flex" justify="space-around">
   <el-form-item label="行驶证号码：" class="inputDeep">
    <el-input placeholder="请输入行驶证号码"   style="width: 214px;" v-model="driveCertificate.transportCertificateNumber" readonly disabled></el-input>
  </el-form-item>
   <el-form-item label="发动机号码：">
    <el-input placeholder="请输入发动机号码" style="width: 214px;"   v-model="driveCertificate.engineNumber"></el-input>
  </el-form-item>
   <el-form-item label="注册时间：">
   <el-date-picker
      v-model="driveCertificate.registrationDate"
      type="date"
      placeholder="请选择注册日期">
    </el-date-picker>
  </el-form-item>
 </el-row>
  <el-row type="flex" justify="space-around" >
  <el-form-item label="强制报废日期" >
   <el-date-picker
      v-model="driveCertificate.mandatoryScrap"
      type="date"
      placeholder="请选择强制报废日期">
    </el-date-picker>
  </el-form-item>
   <el-form-item label="整备质量：">
    <el-input  style="width: 204px;" v-model="driveCertificate.overallQuality">
       <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">吨</span>
    </template>
    </el-input>
  </el-form-item>
   <el-form-item label="检验有效期：">
   <el-date-picker
      v-model="driveCertificate.expirationDate"
      type="date"
      placeholder="请选择检验有效期">
    </el-date-picker>
  </el-form-item>
 </el-row>
 <el-row type="flex" >
    <el-form-item label="核定载质量：" label-width="140px">
    <el-input  style="width: 204px;" v-model="driveCertificate.allowableWeight">
       <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">吨</span>
    </template>
    </el-input>
  </el-form-item>
  <el-form-item label="有效期：" label-width="190px">
   <el-date-picker
      v-model="driveCertificate.validityPeriod"
      type="date"
      placeholder="请选择行驶证有效期">
    </el-date-picker>
  </el-form-item>
 </el-row>
 <el-row>
  <el-form-item label="图片信息">

  </el-form-item>
    <!-- <el-upload  ></el-upload> -->

 </el-row>
     </el-form>
    </el-tab-pane>
  </el-tabs>
     </el-card>
       <el-card>
   <el-row type="flex" justify="center">
      <el-button type="danger" class="btn" @click="edit">编辑</el-button>
   </el-row>
   </el-card>
  </div>
</template>

<script>
import { getCartInformation, getCartName, getdriveCertificate } from '@/api/vehiclelist'
export default {
  name: 'vehiclelist-info',
  data () {
    return {
      value1: '',
      driveCertificate: {},
      list: [],
      form: {},
      activeName: 'first',
      userId: this.$route.params.id // 拿到id
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    // 编辑
    edit () {
      console.log(1)
      // this.
    },
    async getList () {
      const res = await getCartInformation(this.userId)
      // console.log(res)
      this.form = res.data
      const r = await getCartName()
      // console.log(r)
      this.list = r.data
      const re = await getdriveCertificate(this.userId)
      console.log(re)
      this.driveCertificate = re.data
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.btn {
  background-color: rgb(225, 85, 54);
    color: rgb(255, 255, 255);
    width: 110px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid rgb(225, 85, 54);

}
.ssss {
  color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    // font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;
}
/* 利用穿透，设置input边框隐藏 */
 ::v-deep .el-input__inner {
   border: none !important;
   color: #fff;
  }

</style>
